<template>
  <div class="comment-item">
    <img :src="comment.avatar" alt="">
    <main>
      <div style="display: flex;align-items: center">
        <p class="username">{{comment.username}}</p><level :level="comment.level"/><verticle-line/>
        <p class="job">{{comment.job}} <span>@{{comment.company}}</span><verticle-line/></p>
        <p class="time">{{parseTime.parseDateTime(comment.oprateTime)}}</p>
      </div>
      <p class="content">{{ comment.comment }}</p>
    </main>
  </div>
</template>

<script>
import Level from "@/components/level";
import VerticleLine from "@/components/verticle-line";
export default {
  name: "comment-item",
  components: {VerticleLine, Level},
  props: {
    comment: {
      type: Object,
      default() {
        return{
          username: '采蘑菇的小姑娘',
          level: 6,
          job: '前端开发',
          time: '2020/11/10 09:14',
          content: '啊是的评价啊时间都劈死哦怕阿斯顿啊是的评价啊时间都劈死哦怕阿斯顿啊是的评价啊时间都劈死哦怕阿斯顿啊是的评价啊时间都劈死哦怕阿斯顿'
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.comment-item{
  display: flex;
  padding: 20px 0;
  border-bottom: 1px solid #f1f1f1;
  img{
    .size(30px);
    border-radius: 50%;
    margin-right: 20px;
  }
  main{
    .username{
      margin-right: 10px;
    }
    .job,.time{
      color: #86909c;
    }
    .content{
      margin-top: 10px;
      color: #4e5969;
    }
  }
}
</style>